
<form nz-form [nzLayout]="'inline'" class="search__form">
<nz-row [nzGutter]="8">
    <nz-col nzMd="5" nzSm="24">
        <nz-form-item>
            <nz-form-control>
                <input nz-input [(ngModel)]="q.name" autocomplete="off" name="name" placeholder="Enter name" id="name">
            </nz-form-control>
        </nz-form-item>
    </nz-col>
    <nz-col nzMd="5" nzSm="24" *ngIf="!lockLevel">
        <nz-form-item>            
            <nz-form-control>
                <nz-select nzAllowClear name="type" placeholder="请选择" [(ngModel)]="q.userLevel"  nzId="type">
                    <nz-option *ngFor="let type of types" [nzLabel]="type.text" [nzValue]="type.value"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
    </nz-col>
    <nz-col nzMd="5" nzSm="24" *ngIf="!lockLevel">
        <nz-form-item>
            <nz-form-label nzFor="showBody">Show sub account</nz-form-label>
            <nz-form-control>
                <nz-switch name="showBody" (ngModelChange)='change($event)' [(ngModel)]="switchValue"></nz-switch>
            </nz-form-control>
        </nz-form-item>
    </nz-col>
    <nz-col nzMd="9" nzSm="24">
        <button nz-button type="button" [nzType]="'default'" (click)="st.load(1, q)"><i class="anticon anticon-search"></i>Search</button>
        <button nz-button type="button" [nzType]="'primary'"  (click)="save()">Confirm</button>
    </nz-col>
</nz-row>
</form>
<simple-table #st
  style="margin-top: 8px"
  [columns]="columns"
  [data]="url"
  [ps]="ps"
  [extraParams]="q"
  [resReName]="{ total: 'data.total', list: 'data.rows'}"
  [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
  toTopInChange
  [showTotal]="true"
  [showPagination]="true"
  (checkboxChange)="checkChange($event)"
  (radioChange)="radioChange($event)"
  >  
  <ng-template st-row="level" let-i> 
      <span [ngClass]="{'text-red': i.userLevel === 'FIRST', 'text-cyan': i.userLevel === 'SECOND', 'text-green': i.userLevel === 'THIRD'}">
      {{i.userLevel === 'FIRST' ? '一级用户' : i.userLevel === 'SECOND' ? '二级用户' : '三级用户'}}    
      </span>   
  </ng-template>
</simple-table>
